<template>
  <div class="person">
    <h2>{{ a }}</h2>
    <ul>
      <li v-for="item of list" :key="item.id">
        {{ item.name }}---{{ item.age }}
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts" name="Person">
import { type Persons } from "@/types";
// 1.只接收数据
// defineProps(["a", "list"]);

// 2.接收数据+泛型限制类型
// defineProps<{ list: Persons; a: string }>();

// 3.接收数据+泛型限制类型+?限制必要性+指定默认值
withDefaults(defineProps<{ list: Persons; a?: string }>(), 
{ a: "我是默认值" ,list:()=>[{ id: "131v", name: "张三", age: 18 }]});

// 4.接收数据同时将props保存起来
/* let x = defineProps(["a", "list"]); // Proxy(Object) {a: '哈哈', list: Proxy(Array)}
console.log(x); // 哈哈
// x.a = "呵呵"; // 无法对a赋值，因为它是只读属性 */
</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin: 0 5px;
}
li {
  font-size: 20px;
}
</style>
